<template>
  <div class="nav-outer">
    <div class="nav-wrapper">
      <img src="@/assets/image/logo.png" alt="ToKnow"
      class="logo" @click="$open('/')">

      <item-list class="nav-list"
      :items="contentTypesCover" :idx="contentTypeIdx"
      @changeIdx="changeContentType"
      ></item-list>

      <user-card
      class="user-card"
      ></user-card>

      <div class="search-wrapper">
        <search-bar
        class="search-bar"
        v-model:searchValue="searchValue"
        @search="search"
        ></search-bar>

        <pub-sth
        class="pub-sth"
        @click="$open('/publish/article')"
        ></pub-sth>
      </div>
    </div>
  </div>
</template>

<script>
import SearchBar from './utils/SearchBar.vue'
import PubSth from './TopNavCom/PubSth.vue'
import UserCard from './TopNavCom/UserCard.vue'
import ItemList from './utils/ItemList.vue'

export default {
  components: {
    SearchBar,
    PubSth,
    UserCard,
    ItemList
  },
  data() {
    return {
      contentTypes: [
        'article', 'source'
      ],
      contentTypesCover: [
        '文章', '资源'
      ],
      searchValue: ""
    }
  },
  computed: {
    contentTypeIdx() {
      return this.$route.path.endsWith('source')
        ? 1
        : this.$route.path.endsWith('article')
          ? 0
          : -1;
    }
  },
  watch: {
  },
  methods: {
    changeContentType(idx) {
      if(this.$route.path.endsWith('source') || this.$route.path.endsWith('article')){
        this.$router.push({
          path: `./${this.contentTypes[idx]}`,
          query: this.$route.query
        });
      } else {
        this.$router.push({
          name: idx ? 'indexSource' : 'indexArticle'
        });
      }
    },
    search() {
      if(['searchArticle', 'searchSource'].includes(this.$route.name)) {
        this.$router.push({
          path: this.$route.path,
          query: {
            ...this.$route.query,
            q: this.searchValue
          }
        });
      } else if(['indexArticle', 'indexSource'].includes(this.$route.name)) {
        this.$router.push({
          name: `search${this.$route.name.slice(5)}`,
          query: {
            ...this.$route.query,
            q: this.searchValue
          }
        })
      } else {
        this.$router.push({
          path: 'searchArticle',
          query: {
            q: this.searchValue
          }
        })
      }
    },
  },
  mounted () {
  },
}
</script>

<style scoped lang="less">
.nav-outer {
  position: fixed;
  top: 0;
  --h: var(--topNavHeight);
  --iw: 1200px;
  --ih: calc(var(--topNavHeight) * 7 / 12);
  width: 100vw;
  background-color: white;

  .user-log {
    transition: .3s;
  }
}

.nav-wrapper {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: var(--iw);
  // border-bottom: 2px solid black;
  height: var(--h);

  .logo,
  .nav-list {
    float: left;
  }

  .search-wrapper,
  .user-card {
    float: right;
  }

  .logo {
    height: var(--topNavHeight);

    &:hover {
      cursor: pointer;
    }
  }

  .nav-list {
    margin-left: 20px;
    --itemNum: 4;
    --itemListWidth: 300px;
    --itemListHeight: var(--topNavHeight);
  }

  .pub-sth {
    transition: .1s;
  }

  .user-card {
    z-index: 9999;
    margin-right: 20px;
    --userCardWidth: 140px;
    --userCardHeight: var(--h);
    --userCardInnerHeight: var(--ih);
  }

  .search-wrapper {
    position: relative;
    margin-right: 20px;
    height: var(--h);
    width: 350px;

    .search-bar {
      --searchBarWidth: 200px;
      --searchBarHeight: var(--h);
      --searchBarInnerHeight: var(--ih);
      --searchBarFontSize: 15px;
      --backgroundColor: white;
      position: absolute;
      left: 0;
      z-index: 1;
    }

    .pub-sth {
      position: absolute;
      right: 0;
      width: 120px;
      overflow: hidden;
      transition: .2s;
    }

    &:focus-within {
      .search-bar {
        width: 350px;
      }

      .pub-sth {
        opacity: 0;
        width: 0;
      }
    }
  }
}
</style>